<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <!-- <meta name="viewport" content="initial-scale=2,user-scalable=no"> -->
    <!-- <meta name="viewport" content="initial-scale=2,width=device-width,user-scalable=no"> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        /* width:50%; */
        /* width:50vw; */
        width: 50rem;
      }
    </style>
  </head>
  <body>
    <div style="width: 300px">
      <img src="./nvshen.jpg" alt="" />
    </div>
    <script>
      /*
            移动端复习
                1.每台手机的物理像素和设备独立像素的个数从手机生产出来之后,永久不变

                2.移动端具有几个视口?
                    1.布局视口
                        当前页面上所有的东西都存在于这个布局视口上
                        其实就是html标签(单位:css像素)

                        布局视口默认宽度是980px,这个数字是苹果公司制定的

                    2.视觉视口
                        视觉视口约束了我们能看到多少东西
                        其实就是手机屏幕(单位:设备独立像素或者物理像素)

                        以iphone6举例,横向方面物理像素点有750个,设备独立像素点有375个

                    3.理想视口(又称为完美视口)
                        如果当前布局视口的宽度等于视觉视口的宽度,这种状态称为理想视口状态

                    扩展点:
                        1.如果布局视口的内容,超出了视觉视口,浏览器就会出现滚动条
                        2.视觉视口的大小是无法变化的,所以想要实现理想视口状态,只能让布局视口大小变化

                3.如何修改布局视口大小?
                    通过meta[name=viewport]标签,可以快速控制当前布局视口的宽度
                        <meta name="viewport" content="width=300">

                        device-width代表的是当前设备的设备独立像素宽度
                        initial-scale = 视觉视口宽度/布局视口宽度 = 1

                    注意点:width属性和initial-scale属性,两者谁计算出来的布局视口宽度更大就以谁为准

                4.如何获取到视觉视口宽度?
                    1.实现理想视口状态,让布局视口获取到视觉视口的宽度(变成一样大)
                        <meta name="viewport" content="width=device-width,user-scalable=no">

                    2.通过js代码,获取到html元素,读取html的宽度即可
                        html.clientWidth

                5.移动端适配
                    1.百分比适配
                        宽高方面的百分比,会参考父元素的宽高实现动态变化
                        如果出现了结构上的嵌套,那么当前元素的50%,可能就不是页面的50%宽度

                    2.vw和vh适配
                        100vw=屏幕的100%宽度
                        100vh=屏幕的100%高度

                        该单位是C3新特性,在部分浏览器上不太好使,会出现问题

                        小总结:我们想要的是一个全局可见的单位,而且这个单位会随着屏幕的宽度发生变化

                    3.rem适配
                        rem->root em(根节点的字体大小)

        */

      function setRem() {
        // 1.获取到当前布局视口宽度(其实是为了获取到视觉视口宽度)
        var html = document.documentElement;
        // console.log(html.clientWidth)

        // 2.将屏幕的宽度/10,也就是说当前的width就是屏幕10%的宽度
        // 注意:此处的10是可以更换成其他数字的,最好是10,12,16等,不要太大
        var width = html.clientWidth / 10;

        // 3.将html的字体大小,修改为当前屏幕的10%的宽度
        html.style.fontSize = width + "px";
      }

      setRem();

      widnow.onresize = setRem;
    </script>
  </body>
</html>
